import React, { useRef, useState } from "react";

interface CustomAlertProps {
  open: boolean;
  icon: string;
  title: string;
  message: string;
  onOk: () => void;
}

const dialogStyleBase: React.CSSProperties = {
  minWidth: 350,
  maxWidth: 420,
  background: '#fff',
  border: '1.5px solid #bdbdbd',
  borderRadius: 4,
  boxShadow: '0 2px 12px rgba(0,0,0,0.13)',
  padding: 0,
  fontFamily: 'Segoe UI, Arial, sans-serif',
  overflow: 'hidden',
  position: 'absolute',
  left: 0,
  top: 0,
  zIndex: 100,
};

const titleBarStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  background: '#f8f8f8',
  borderBottom: '1px solid #e0e0e0',
  height: 26,
  padding: '0 0px 0 8px',
  cursor: 'move',
  userSelect: 'none',
};

const titleLeftStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
};

const titleIconStyle: React.CSSProperties = {
  width: 16,
  height: 16,
  marginRight: 5,
  marginLeft: 2,
};

const titleTextStyle: React.CSSProperties = {
  fontWeight: 600,
  fontSize: 12,
  color: '#222',
  marginTop: 1,
};

const closeStyle: React.CSSProperties = {
  width: 28,
  height: 28,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: 22,
  color: '#444',
  border: 'none',
  background: 'transparent',
  cursor: 'pointer',
  marginRight: 2,
  marginTop: 1,
  borderRadius: 2,
  transition: 'background 0.15s',
};

const closeHoverStyle: React.CSSProperties = {
  background: '#f0f0f0',
};

const bodyStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'flex-start',
  padding: '5px 5px 0 5px',
  background: '#f0f0f0',
};

const iconStyle: React.CSSProperties = {
  width: 25,
  height: 25,
  marginRight: 25,
  marginTop: 2,
  flexShrink: 0,
};

const textBlockStyle: React.CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-start',
};

const titleStyle: React.CSSProperties = {
  fontWeight: 700,
  fontSize: 12,
  marginBottom: 6,
  color: '#222',
  lineHeight: 1.2,
};

const messageStyle: React.CSSProperties = {
  color: '#444',
  fontSize: 11,
  marginBottom: 2,
  lineHeight: 1.3,
};

const footerStyle: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'flex-end',
  alignItems: 'center',
  padding: '0px 18px 14px 0',
  background: '#f0f0f0',
};

const buttonStyle: React.CSSProperties = {
  minWidth: 60,
  padding: '2px 18px',
  fontSize: 11,
  border: '1px solid #bdbdbd',
  borderRadius: 2,
  background: '#f5f5f5',
  color: '#222',
  cursor: 'pointer',
  outline: 'none',
  boxShadow: 'none',
  marginLeft: 8,
};

const CustomAlert: React.FC<CustomAlertProps> = ({ open, icon, title, message, onOk }) => {
  const [closeHover, setCloseHover] = useState(false);
  const [dragging, setDragging] = useState(false);
  const [offset, setOffset] = useState({ x: 0, y: 0 });
  const [start, setStart] = useState({ x: 0, y: 0 });
  const [dialogPos, setDialogPos] = useState({ x: 0, y: 0 });
  const dialogRef = useRef<HTMLDivElement>(null);

  // 拖动事件
  const onMouseDown = (e: React.MouseEvent) => {
    setDragging(true);
    setStart({ x: e.clientX, y: e.clientY });
    setOffset({ x: dialogPos.x, y: dialogPos.y });
    document.body.style.userSelect = 'none';
  };
  React.useEffect(() => {
    if (!dragging) return;
    const onMouseMove = (e: MouseEvent) => {
      const dx = e.clientX - start.x;
      const dy = e.clientY - start.y;
      setDialogPos({ x: offset.x + dx, y: offset.y + dy });
    };
    const onMouseUp = () => {
      setDragging(false);
      document.body.style.userSelect = '';
    };
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
    };
  }, [dragging, start, offset]);

  if (!open) return null;
  return (
    <div
      ref={dialogRef}
      style={{
        ...dialogStyleBase,
        left: dialogPos.x,
        top: dialogPos.y,
        cursor: dragging ? 'move' : 'default',
      }}
    >
      <div
        style={titleBarStyle}
        onMouseDown={onMouseDown}
      >
        <div style={titleLeftStyle}>
          <img src={icon} alt="icon" style={titleIconStyle} />
          <span style={titleTextStyle}>{title}</span>
        </div>
        <button
          style={closeHover ? { ...closeStyle, ...closeHoverStyle } : closeStyle}
          onMouseEnter={() => setCloseHover(true)}
          onMouseLeave={() => setCloseHover(false)}
          onClick={onOk}
          aria-label="Close"
          tabIndex={0}
        >
          ×
        </button>
      </div>
      <div style={bodyStyle}>
        <img src={icon} alt="icon" style={iconStyle} />
        <div style={textBlockStyle}>
          <div style={titleStyle}>Cannot Redeem Code</div>
          <div style={messageStyle}>{message}</div>
        </div>
      </div>
      <div style={footerStyle}>
        <button style={buttonStyle} autoFocus onClick={onOk}>OK</button>
      </div>
    </div>
  );
};

export default CustomAlert; 